<template>
  <el-row class="associated-member">
    <el-col :span="12" class="section-left">
      <el-input
        class="search"
        size="mini"
        ref="input"
        placeholder="请输入搜索内容"
        suffix-icon="el-icon-search"
        v-model.trim="searchTextLeft"
        clearable
        @input="getSearch"
      />
      <div class="header">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          :disabled="leftData.length === 0"
        >
          全选
        </el-checkbox>
      </div>
      <el-checkbox-group
        class="checkbox-group"
        v-model="checkedRoles"
        @change="handleCheckedItemsChange"
      >
        <el-checkbox
          v-for="(role, index) in leftData"
          :label="role.value"
          :key="'l'+index"
        >
          {{ role.label }}
        </el-checkbox>
      </el-checkbox-group>
    </el-col>
    <el-col :span="12" class="section-right">
      <div class="header"><span>已选择{{ checkedRoles.length }}个</span>
        <el-link class="clear" @click="clearRole">清空</el-link>
      </div>
      <div class="checked-group">
        <el-col
          class="li"
          v-for="(role, index) in selectedRoles"
          :key="'r'+index"
        >
          <span>{{ role.label }}</span>
          <i class="el-icon-circle-close" style="cursor: pointer" @click="delRole(role, index)"/>
        </el-col>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "CsTransfer",
  model: {
    event: 'input-change',
    prop: 'newValue'
  },
  props: {
    roles: {
      type: Array,
      default() {
        return []
      }
    },
    newValue: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      checkAll: false,
      isIndeterminate: false,
      searchTextLeft: '',
    }
  },
  computed: {
    // 右侧已选数据
    selectedRoles() {
      let arr = []
      if (this.checkedRoles.length > 0) {
        arr = this.roles.filter((item) => this.checkedRoles.includes(item.value))
        return arr
      }
    },
    leftData() {
      if (this.searchTextLeft) {
        return this.roles.filter(item => {
          const input = this.searchTextLeft.toLowerCase()
          const lable = item.label.toLowerCase()
          const value = item.value
          return lable.includes(input) || value.includes(input)
        })
      } else {
        return this.roles
      }
    },
    checkedRoles: {
      get() {
        return this.newValue.map(item => item.value)
      },
      set(val) {
        this.$emit('input-change', this.roles.filter(item => val.includes(item.value)))
      }
    }
  },
  watch: {
    checkedRoles: {
      handler: function () {
        this.handleCheckedItemsChange()
      },
      immediate: true
    }
  },
  methods: {
    showEdit(row) {
      this.drawer = true
    },
    // 处理搜索
    getSearch() {
      this.handleCheckedItemsChange()
    },
    // 全选
    handleCheckAllChange(val) {
      if (val) {
        const left = this.leftData.map(item => item.value)
        // 去重复
        this.checkedRoles = Array.from(new Set([...this.checkedRoles, ...left]))
      } else {
        const ids = this.leftData.map(item => item.value)
        this.checkedRoles = this.checkedRoles.filter(item => !ids.includes(item))
      }
      // this.isIndeterminate = false
    },
    // 改变多选框状态
    handleCheckedItemsChange() {
      if (!this.leftData.some(item => this.checkedRoles.includes(item.value))) {
        // 全选框状态为空条件
        this.checkAll = false
        this.isIndeterminate = false
      } else if (this.leftData.every(item => this.checkedRoles.includes(item.value))) {
        // 全选框为半选状态
        this.checkAll = true
        this.isIndeterminate = false
      } else {
        this.checkAll = false
        this.isIndeterminate = true
      }
    },
    // 删除某一个
    delRole(role, index) {
      // this.checkedRoles.splice(index, 1)
      this.checkedRoles = this.checkedRoles.filter(item => item !== role.value)

    },
    // 清空已选择数据
    clearRole() {
      this.checkedRoles = []
      // this.handleCheckedItemsChange()
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

.associated-member {
  border-radius: 5px;

  .section-left, .section-right {
    display: flex;
    flex-direction: column;
    border: 1px solid #eeeeee;
    height: 300px;

    .header {
      height: 35px;
      padding: 0 16px;
      line-height: 35px;
      background-color: #f3f3f3;
      display: flex;
      justify-content: space-between;
    }

    .search {
      padding: 5px;
      height: 35px;
      border-bottom: 1px solid #eeeeee;

      ::v-deep .el-input__inner {
        border: 0px;
        outline: none;
      }
    }

    .checkbox-group, .checked-group {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: auto;
      padding: 16px 16px 16px;

      .el-checkbox {
        margin-bottom: 10px;
      }
    }

    .checked-group {
      .li {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
